<template>
    <div class="ls-release">
        <div class="ls-card">
            <el-page-header @back="$router.go(-1)" content="商品详情" />
        </div>
        <el-form ref="multipleTable" :model="ruleForm" :rules="rules" label-width="100px">
            <div class="ls-card m-t-16" style="padding-top: 0">
                <el-tabs v-model="tabsActive">
                    <el-tab-pane label="基础信息" name="1">
                        <uiwu-goods-base v-model="ruleForm" />
                    </el-tab-pane>
                    <el-tab-pane label="价格信息" name="2">
                        <!-- <uiwuGoodsPrice></uiwuGoodsPrice> -->
                        <AddPrice v-model="specData"></AddPrice>
                    </el-tab-pane>
                    <el-tab-pane label="详情信息" name="3">
                        <uiwu-goods-detail v-model="ruleForm" />
                    </el-tab-pane>

                    <el-tab-pane label="售后信息" name="4">
                        <uiwu-goods-sales v-model="ruleForm" />
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div class="uiwu-footer">
                <el-button class="btn" v-if="tabsActive != 1" @click="stupActive">上一步</el-button>
                <!-- <el-button class="btn">返回</el-button> -->
                <el-button class="btn" type="primary" v-if="tabsActive != 4" @click="nextActive()">下一步</el-button>
                <el-button class="btn" type="primary" v-if="tabsActive == 4" @click="sumit">确定</el-button>
            </div>
        </el-form>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import uiwuGoodsBase from '@/components/uiwu-goods-base/uiwu-goods-base.vue'
import uiwuGoodsPrice from '@/components/uiwu-goods-price/uiwu-goods-price.vue'
import uiwuGoodsDetail from '@/components/uiwu-goods-detail/uiwu-goods-detail.vue'
import uiwuGoodsSales from '@/components/uiwu-goods-sales/uiwu-goods-sales.vue'
import AddPrice from '@/components/goods/add-price.vue'
import { apiGoodsAdd, apiGoodsDetail, apiGoodsEdit } from '@/api/goods'
@Component({
    components: {
        uiwuGoodsBase,
        uiwuGoodsDetail,
        uiwuGoodsPrice,
        uiwuGoodsSales,
        AddPrice
    }
})
export default class GoodsRelease extends Vue {
    $refs!: { multipleTable: any }
    tabsActive = '1'
    ruleForm: any = {
        name_store: '', //商品标题
        sub_name: '', //商品副标题
        type: 1, //商品类型
        category_id: [],
        brand_id: '', //商品品牌
        image: '', //商品主图
        goods_image: [], //轮播图
        video: '', //商品视频
        install_fee: '', //安装费
        old_fee: '', //折旧费
        sale_day: '', //售后期限
        sale_content: '', //售后详情
        content: '', //详情
        label: '',
        sale_type: 1,
        spec_value_list: [
            {
                id: '',
                image: '',
                sell_price: '',
                lineation_price: '',
                cost_price: '',
                stock: '',
                volume: '',
                weight: '',
                bar_code: ''
            }
        ]
    }
    rules: any = {
        type: [
            {
                required: true,
                message: '请选择商品类型',
                trigger: 'change'
            }
        ],
        name: [
            {
                required: true,
                message: '请输入商品标题',
                trigger: 'blur'
            }
        ],
        sub_name: [
            {
                required: true,
                message: '请输入商品副标题',
                trigger: 'blur'
            }
        ],
        image: [
            {
                required: true,
                message: '请上传商品主图',
                trigger: 'blur'
            }
        ],
        goods_image: [
            {
                required: true,
                message: '请上传商品轮播图',
                trigger: 'blur'
            }
        ],
        category_id: [
            {
                required: true,
                message: '请选择商品分类',
                trigger: 'blur'
            }
        ],
        label: [
            {
                required: true,
                message: '请选择商品属性标签',
                trigger: 'blur'
            }
        ]
    }
    specData: any = {
        spec_type: 1,
        spec_value: [],
        spec_value_list: [],
        specs_single: {}
    }
    stupActive() {
        this.tabsActive = String(Number(this.tabsActive) - 1)
    }
    nextActive() {
        this.tabsActive = String(Number(this.tabsActive) + 1)
    }
    sumit() {
        this.$refs.multipleTable.validate(async (valid: any) => {
            if (valid) {
                // if (this.specData.spec_type == 1) {
                //     this.specData.spec_value_list = [this.specData.specs_single]
                //     this.specData.spec_value = []
                //     this.specData.specs_single = []
                // }

                // 数据深拷贝 。 不用清空原始数据，防止某些情况下触发了先清空在赋值的问题
                const specData = JSON.parse(JSON.stringify(this.specData))
                const ruleForm = JSON.parse(JSON.stringify(this.ruleForm))

                if (specData.spec_type == 1) {
                    specData.spec_value_list = [this.specData.specs_single]
                    specData.spec_value = []
                    specData.specs_single = []
                }
                console.log('****************************打印输出测试**********************************')
                console.log('先看看深拷贝数据')
                console.log({ ...ruleForm, ...specData })
                console.log('*****************************分割线**************************************')
                console.log('在看看原始数据')
                console.log({ ...this.ruleForm, ...this.specData })
                console.log('*******************************end**************************************')
                if (this.$route.query.id) {
                    await apiGoodsEdit({ ...ruleForm, ...specData })
                } else {
                    await apiGoodsAdd({ ...ruleForm, ...specData })
                }
                this.$router.go(-1)
            } else {
                this.$message.error('请完善必填项')
                console.log('error submit!!')
            }
        })
    }
    created() {
        if (this.$route.query.id) {
            apiGoodsDetail(Number(this.$route.query.id)).then(res => {
                this.ruleForm = res
                this.initData(res)
            })
            return
        }
        this.initData()
    }
    // 初始化规格数据
    initData(data: any = {}) {
        const spec_value = [
            {
                has_image: true,
                id: '',
                name: '',
                spec_list: [
                    {
                        id: '',
                        value: '',
                        image: ''
                    }
                ]
            }
        ]
        const spec_value_list = [
            {
                id: '',
                image: '',
                sell_price: '',
                lineation_price: '',
                cost_price: '',
                stock: '',
                volume: '',
                weight: '',
                bar_code: '',
                unit_id: ''
            }
        ]

        const specData: any = {
            spec_value: data.spec_value || spec_value,
            spec_value_list: data.spec_value_list || spec_value_list,
            spec_type: data.spec_type || 1,
            specs_single: spec_value_list[0]
        }
        specData.spec_value.forEach((item: any) => {
            item.has_image = false
            item.spec_list.forEach((sitem: any) => {
                sitem.image = ''
            })
        })

        if (data.spec_type == 1) {
            specData.spec_value = spec_value
            specData.specs_single = data.spec_value_list[0]
        }
        Object.assign(this.specData, specData)
    }
}
</script>
<style lang="scss" scoped>
.uiwu-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 16px;

    .btn {
        width: 120px;
    }
}
</style>
